<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="../../../yl/index.css" />
    <link rel="stylesheet" href="../../../style/index.css" />
    <title>网格信息</title>
    <style>
        /* .el-tabs__active-bar {
            background-color: #f56c6c;
        }

        .el-tabs__item.is-active {
            color: #f56c6c;
        }

        .el-tabs__item:hover {
            color: #f56c6c;
        } */

        .demo-tabs {

            height: 100%;
        }

        .table_titel {
            height: 46px;
            line-height: 46px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .titel {
            font-size: 18px;
            font-weight: bold;
            line-height: 23px;
        }

        .table_titel .titel {
            font-size: 24px;
            font-weight: bold;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <div class="title">
            <div>
                <template v-if="activeName == 'first'">
                    网格名称<el-input v-model="page.value1" style="width: 200px; margin:0 10px; "
                    placeholder="请输入蓝牌名称"></el-input>
                </template>
                <template v-else>
                    网格名称<el-input v-model="page1.value1" style="width: 200px; margin:0 10px; "
                    placeholder="请输入蓝牌名称"></el-input>
                    网格员姓名<el-input v-model="page1.value2" style="width: 200px; margin:0 10px; "
                    placeholder="请输入网格员姓名"></el-input>
                    网格职务<el-select v-model="page1.value3" placeholder="请选择网格职务" style="width: 200px; margin:0 10px; "> 
                        <el-option v-for="(item,index) in grid_member_type" :key="index" :label="item.Grid_Member_Type" :value="item.Grid_Member_Type_SerialNumber" />
                    </el-select>
                </template>
                <el-button icon="Search" style="margin: 0; margin-right: 10px;" @click="check">查询</el-button>
                <el-button icon="Refresh" style="margin: 0; margin-right: 10px;" @click="reset">重置</el-button>
                <!-- <el-button type="primary" icon="CirclePlus" style="margin: 0; margin-right: 10px;" @click="personalAdd" plain round>添加</el-button> -->
                <el-button type="primary" icon="CirclePlus" style="margin: 0; margin-right: 10px;" @click="personalAdd"
                    plain round>添加</el-button>
                <!-- <el-button type="warning" icon="Download" style="margin: 0; margin-right: 10px;" @click="personalAdd"
                    plain round>批量导入</el-button> -->
                <el-button type="success" icon="Upload" style="margin: 0; margin-right: 10px;" @click="Batchexport"
                    plain round>批量导出</el-button>
                <!-- <el-button type="danger" icon="Delete" style="margin: 0; margin-right: 10px;" @click="personalAdd" plain
                    round>批量删除</el-button> -->
            </div>
        </div>
        <div class="body">
            <div class="left">
                <el-tree ref="tree" id="tree" highlight-current default-expand-all :expand-on-click-node="false"
                    :data-options="JSON.stringify({ 'TableName': 'party_organization', 'NodeCode': '','primary_key':'Party_Organization_SerialNumber' })"
                    style="max-width: 600px" :data="treeData" @node-click="handleNodeClick"
                    :props="{ label: 'Province' }">
                    <template #default="{ node, data }">
                        <div class="custom-tree-node">
                            <span>{{ node.label }}</span>
                            <div v-if="!data.children||data.children.length==0" class="item"
                                :style="{backgroundColor:ProvinceNumber==data.ProvinceNumber?'rgb(235.9, 245.3, 255)':''}">
                                <el-dropdown trigger="click">
                                    <el-icon class="el-icon--right"><More-Filled /></el-icon>
                                    <template #dropdown>
                                        <el-dropdown-menu>
                                            <el-dropdown-item @click="handleAdd1(data)">
                                                添加网格
                                            </el-dropdown-item>
                                        </el-dropdown-menu>
                                    </template>
                                </el-dropdown>
                            </div>
                        </div>
                    </template>
                </el-tree>
            </div>
            <div class="right" style="display: flex;flex-direction: column;">
                <!-- <el-button class="zdtype" @click="handleOpenDialog">设置显示字段</el-button> -->
                <el-tabs v-model="activeName" class="demo-tabs" type="card" @tab-click="handleClick"
                    style="margin-bottom: 1%;">
                    <el-tab-pane label="网格管理" name="first" style="height: 100%;">
                        <div style="display: flex; flex-direction: column;height: 100%;">
                            <el-table id="table" border height="100%"
                                :data-options="JSON.stringify({ 'TableName': 'grid_information','primary_key':'Grid_SerialNumber'})"
                                v-loading="loading" ref="multipleTable" tooltip-effect="dark" :data="Tabletdata">
                                <el-table-column min-width="180" v-for="column in columns" :key="column.COLUMN_NAME"
                                    :prop="column.COLUMN_NAME" :label="column.COLUMN_COMMENT">
                                    <template v-slot="{row}">
                                        <div
                                            v-if="row[column.COLUMN_NAME].includes('.png')||row[column.COLUMN_NAME].includes('.jpg')">
                                            <el-image style="width: 100px; height: 100px"
                                                :src="photo + row[column.COLUMN_NAME]" fit="contain"></el-image>
                                        </div>
                                        <div v-else>
                                            {{row[column.COLUMN_NAME]}}
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column label="操作" fixed="right" width="160">
                                    <template #default="{row}">
                                        <div style="display: flex; align-items: center;">
                                            <el-button size="small" style="margin-right: 10px;"
                                                @click="handleEdit(row)">
                                                编辑
                                            </el-button>
                                            <el-dropdown trigger="click" @command="(val)=>{this[val](row)}">
                                                <el-button size="small" type="danger">
                                                    更多<el-icon class="el-icon--right"><arrow-down /></el-icon>
                                                </el-button>
                                                <template #dropdown>
                                                    <el-dropdown-menu>
                                                        <el-dropdown-item command="handleMember1">
                                                            配置网格员
                                                        </el-dropdown-item>
                                                        <el-dropdown-item command="handleMember2">
                                                            配置社区民警
                                                        </el-dropdown-item>
                                                        <el-dropdown-item command="handleDelete">
                                                            删除
                                                        </el-dropdown-item>
                                                    </el-dropdown-menu>
                                                </template>
                                            </el-dropdown>
                                        </div>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <el-pagination style="margin-top: 1%;flex-shrink: 0; flex-shrink: 0;"
                                :current-page="page.PageNumber" :page-size="page.RowAmount"
                                :page-sizes="[10, 100, 200, 300, 400]" layout="total, sizes, prev, pager, next, jumper"
                                :total="Total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="网格人员管理" name="second" style="height: 100%;">
                        <div style="display: flex; flex-direction: column; height: 100%; ">
                            <el-table border v-loading="loading" ref="multipleTable1" tooltip-effect="dark" 
                                :data="Tabletdata1" @expand-change="ExpandChange">
                                <el-table-column type="expand" width="60" label="详情">
                                    <template v-slot="{row}">
                                        <el-card class="box-card" style="margin: 0 10px;">
                                            <div style="display: flex;">
                                                <div style="width: 250px;flex-shrink: 0;">
                                                    <div
                                                        style="margin: 20px;display: flex; flex-direction: column; align-items: center;">
                                                        <el-image v-if="gridzz(row.Grid_SerialNumber).Picture_URL" style="border: 1px solid #ebeef5; width: 100%;"
                                                            :src="photo + gridzz(row.Grid_SerialNumber).Picture_URL" fit="contain"></el-image>
                                                        <div v-else style="font-size: 18px; width: 100%;height: 240px;border: 1px solid #ebeef5;display: flex; align-items: center; justify-content: center;">
                                                            暂无照片
                                                        </div>
                                                        <div class="table_titel">
                                                            <div class="titel">专职网格员</div>
                                                        </div>
                                                        <div>
                                                            <div class="titel">{{gridzz(row.Grid_SerialNumber).Personal_Name}}</div>
                                                            <div class="titel">{{gridzz(row.Grid_SerialNumber).Contact_Phone}}</div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div style="width: 100%;">
                                                    <div class="table_titel">
                                                        <div class="titel">兼职网格员<span style="color: red;">{{grid(row.Grid_SerialNumber).filter(i=>i.Role=='3').length==0?'(暂无兼职网格员)':''}}</span></div>
                                                    </div>
                                                    <el-row>
                                                        <el-col v-for="(item,index) in grid(row.Grid_SerialNumber).filter(i=>i.Role=='3')" :key="index" :span="6">
                                                            <div :style="{borderBottom:index+1 > grid(row.Grid_SerialNumber).filter(i=>i.Role=='3').length -4 ? '1px solid #ebeef5':'',borderRight:(index+1)%4==0||(index+1)==grid(row.Grid_SerialNumber).filter(i=>i.Role=='3').length?'1px solid #ebeef5':''}"
                                                                style="min-height: 50px;border-top: 1px solid #ebeef5;border-left: 1px solid #ebeef5;padding: 5px;">
                                                                <div style="margin-bottom: 5px;">{{item.Agensies_Name}}</div>
                                                                <div>{{item.Personal_Name}} {{item.Contact_Phone}}</div>
                                                            </div>
                                                        </el-col>
                                                    </el-row>
                                                    <div class="table_titel">
                                                        <div class="titel">专业网格员 <span style="color: red;">{{grid(row.Grid_SerialNumber).filter(i=>i.Role=='4').length==0?'(暂无专业网格员)':''}}</span></div>
                                                    </div>
                                                    <el-row>
                                                        <el-col v-for="(item,index) in grid(row.Grid_SerialNumber).filter(i=>i.Role=='4')" :key="index" :span="6">
                                                            <div :style="{borderBottom:index+1 > grid(row.Grid_SerialNumber).filter(i=>i.Role=='4').length-4 ? '1px solid #ebeef5':'',borderRight:(index+1)%4==0||(index+1)==grid(row.Grid_SerialNumber).filter(i=>i.Role=='4').length?'1px solid #ebeef5':''}"
                                                                style="min-height: 50px;border-top: 1px solid #ebeef5;border-left: 1px solid #ebeef5;padding: 5px;">
                                                                <div style="margin-bottom: 5px;">{{item.Agensies_Name}}</div>
                                                                <div>{{item.Personal_Name}} {{item.Contact_Phone}}</div>
                                                            </div>
                                                        </el-col>
                                                    </el-row>
                                                </div>
                                            </div>
                                        </el-card>
                                    </template>
                                </el-table-column>
                                <el-table-column min-width="180" prop="Grid_SerialNumber" label="网格编号"></el-table-column>
                                <el-table-column min-width="180" prop="Party_Organization_Name" label="管辖单位"></el-table-column>
                                <el-table-column min-width="180" prop="Grid_Name" label="网格名称"></el-table-column>
                                <el-table-column min-width="180" prop="Personal_Name" label="网格长姓名"></el-table-column>
                                <el-table-column min-width="180" prop="Contact_Phone" label="联系方式"></el-table-column>
                                <el-table-column label="操作" fixed="right" width="200">
                                    <template #default="{row}">
                                        <div style="display: flex; align-items: center;">
                                            <!-- <el-button size="small" style="margin-right: 10px;" @click="handleEdit(row)">
                                                编辑
                                            </el-button> -->
                                            <el-button size="small" @click="handleMember1(row)">
                                                配置网格员
                                            </el-button>
                                            <el-button size="small"  type="danger" @click="handleDelete(row)">
                                                删除
                                            </el-button>
                                            <!-- <el-dropdown trigger="click" @command="(val)=>{this[val](row)}">
                                                <el-button size="small" type="danger">
                                                    更多<el-icon class="el-icon--right"><arrow-down /></el-icon>
                                                </el-button>
                                                <template #dropdown>
                                                    <el-dropdown-menu>
                    
                                                        <el-dropdown-item command="handleDelete">
                                                            删除
                                                        </el-dropdown-item>
                                                    </el-dropdown-menu>
                                                </template>
                                            </el-dropdown> -->
                                        </div>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <el-pagination style="margin-top: 1%;flex-shrink: 0; flex-shrink: 0;"
                                :current-page="page1.PaginationNumber" :page-size="page1.RowAmount"
                                :page-sizes="[10, 100, 200, 300, 400]" layout="total, sizes, prev, pager, next, jumper"
                                :total="Total1" @size-change="handleSizeChange1"
                                @current-change="handleCurrentChange1" />
                        </div>
                    </el-tab-pane>
                </el-tabs>

            </div>
        </div>
        <el-dialog v-model="showDialog" width="550" class="custom-dialog">
            <template #header>
                <div class="dialog-header">
                    <span>设置显示字段</span>
                </div>
            </template>
            <div class="dialog-content">
                <el-checkbox v-model="isAllChecked" @change="handleAllChecked"
                    class="full-width-checkbox">全选</el-checkbox>
                <div class="checkbox-columns">
                    <el-checkbox-group v-model="checkedFields" style="width: 100%; display: flex; flex-wrap: wrap">
                        <el-checkbox :disabled="field.COLUMN_KEY === 'PRI'" v-for="field in fields" :key="field"
                            :value="field" style="width: 50%; height: 30px; margin-right: 0px">
                            {{ field.COLUMN_COMMENT }}
                        </el-checkbox>
                    </el-checkbox-group>
                </div>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="showDialog = false" class="cancel-btn">取消</el-button>
                    <el-button type="primary" @click="saveFields" class="confirm-btn">保存</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
    </div>
    <script src="../../../utils/utils.js"></script>
    <script src="../../../config/config.js"></script>
    <script src="../../../utils/mixins.js"></script>
    <script src="../../../yl/vue.js"></script>
    <script src="../../../yl/index.js"></script>
    <script src="../../../yl/zh-cn.mjs"></script>
    <script src="../../../yl/index.iife.min.js"></script>
    <script src="../../../yl/jquery.min.js"></script>
<script src="../../../utils/jquery.cookie.js"></script>
    <script src="../../../api/request.js"></script>
     <script src="../../../utils/xlsx.full.min.js"></script>
    <script src="js/index.js"></script>
</body>

</html>